#{extends 'main.html' /}
<head>
<Form action="@{Topics.followTopic()}" method=Post> 
<INPUT TYPE="submit" value="Follow"></form>

<!--Mayar-->

<button onclick="recommendTutorial()">Recommend</button> <br>

</head>



<!--Start of author @Yasmine A.<!--Start of author @Yasmine A.
there are two lists here,TopicTitle is a list that gets all topic
 titles available on the website. 
Another list TutorialTitle gets all published tutorial titles with a specified topic chosen-->
<table border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Topic Updates</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#778899;width:200px;text-align:top;">
<a><u><b>Choose a Topic</b></u></a>
#{list items:Topics, as:'TopicTitle'}

<ul>
<li><a href="/Application/topicUpdates?id=${TopicTitle.id}" value="${TopicTitle.topicName}">${TopicTitle.topicName}</li>
</ul>
#{/list}




<td style="background-color:#eeeeee;height:200px;width:1000px;text-align:top;">
<form action="@{Application.topicUpdates()}" method="GET">
<h1>${topicName} tutorials</h1>
#{ifnot TopicTuts}
<p>
No tutorials created yet.. 
</p>
#{/ifnot}
#{list items:TopicTuts, as:'TutorialTitle'}
	
	<ul>
		<li><a href="/Tutorials/openTutorial?tutId=${TutorialTitle.id}" value="${tutId}">${TutorialTitle.Title}</a></li>
	</ul>
	
	<form action="@{Application.updates()}" method = "GET">
		<div id="${TutorialTitle.id}"></div>
	</form>
	#{/list}
</td>
</tr>

</table>
<!--End of author @Yasmine A.-->